
import { Routes,Route ,NavLink} from 'react-router-dom'
import Home from './components/Home'
import AddOrEdit from './components/AddOrEdit'
import About from './components/About'
import Detail from './components/detail'


function App() {
  return (
    <>
      <div className="container">
        <div className="navbar-header">
          <button className="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <a href="/" className="navbar-brand">学生管理系统</a>
        </div>
        <nav id="bs-navbar" className="collapse navbar-collapse">
          <ul className="nav navbar-nav">
            <NavLink
              to="/home"
              className={({ isActive }) =>
                isActive ? "text-red-500" : "text-black"
              }
            >
              首页
            </NavLink>
            <NavLink
              to="/about"
              className={({ isActive }) =>
                isActive ? "text-red-500" : "text-black"
              }
            >
              关于我们
            </NavLink>
          </ul>
          <ul className="nav navbar-nav navbar-right">
            <NavLink
              to="/add"
              className={({ isActive }) =>
                isActive ? "text-red-500" : "text-black"
              }
            >
              添加用户
            </NavLink>
          </ul>
        </nav>
        {/* 路由的配置 */}
        <Routes>
          <Route path='/home' element = {<Home/>}/>
          <Route path='/about' element = {<About/>}/>
          <Route path='/add/:id' element = {<AddOrEdit/>}/>
          <Route path='/add' element = {<AddOrEdit/>}/>
          <Route path='/detail/:id' element={<Detail />}/>
        </Routes>
      </div>
    </>
  )
}

export default App
